/*
 * @Title: 个人游记
 * @Created by: gsjPC 
 */
<template>
	<scroll-view scroll-y="true" class="scrollHeight">
		<view 
		class="mynoteWrap"
		v-for="(note,index) in noteList"
		:key="index">
			<view class="myNoteImg" @tap="goTourNoteDetails">
				<image mode="scaleToFill" :src="note.myNoteImg"></image>
				<view class="myNoteImgText">
					<view class="mtNoteTitle"><text>{{note.title}}</text></view>
					<view class="mtNoteTime"><text>{{note.time}}</text>{{note.timeDay}}天</view>
					<view class="mtNoteArea"><text>{{note.area}}</text></view>
				</view>
			</view>
			<!-- 语音 -->
			<view  class="voiceCon"  v-if="note.isShowVoice">
				<view class="voiceBtn">
					<!-- 暂停播放 -->
					<view @tap="playVoice(index)" v-if="playIndex == index ? isShowPlay:''"><image src="/static/zantingtingzhi.png"></image></view>
					<!-- 播放 -->
					<view @tap="pausedVoice(index)" v-else><image src="/static/bofang.png"></image></view>
				</view>
			</view>
			<view class="myNoteUser">
				<view @tap="goMyTourNote">
					<view class="mynoteTouxiang"><image mode="scaleToFill" :src="note.touxiang"></image></view>
					<view class="mynoteInfo"><text>{{note.nickName}}</text><text>{{note.signer}}</text></view>
				</view>
				<view class="nynoteZan" @tap="dianzan"><image :src="zan[zanImgIndex]"></image><text>{{note.zanNumb}} 赞</text></view>
			</view>
		</view>
		<view class="writeRouteBtn" @tap="goWriteRoute"><image src="/static/writeRoute.png"></image></view>
	</scroll-view>
</template>

<script>
	export default{
		components:{
		},
		data(){
			return{
				noteList:[
					{
						myNoteImg:'/static/testglPic6.jpg',
						title:'圣托里尼的初夏之行',
						time:'2019.08.06',
						timeDay:3,
						area:'圣托里尼',
						touxiang:'/static/myPic/touXiang.png',
						nickName:'唐老鸭',
						signer:'ei ei~我行我素，自由旅行',
						zanNumb:966,
						isShowVoice:false,
					},
					{
						myNoteImg:'/static/testglPic.png',
						title:'沈阳故宫不一样的假期',
						time:'2019.08.06',
						timeDay:3,
						area:'沈阳',
						touxiang:'/static/myPic/touXiang.png',
						nickName:'小黄鸭',
						signer:'来一场说走就走的旅行',
						zanNumb:682,
						isShowVoice:true,
					},
					{
						myNoteImg:'/static/testglPic5.jpg',
						title:'国家级特别景区',
						time:'2019.07.16',
						timeDay:3,
						area:'石钟山景区',
						touxiang:'/static/myPic/touXiang.png',
						nickName:'大粉鸭',
						signer:'ei ei~我行我素，自由旅行',
						zanNumb:955,
						isShowVoice:true,
					},
					{
						myNoteImg:'/static/testglPic5.jpg',
						title:'国家级特别景区',
						time:'2019.07.16',
						timeDay:3,
						area:'石钟山景区',
						touxiang:'/static/myPic/touXiang.png',
						nickName:'大粉鸭',
						signer:'ei ei~我行我素，自由旅行',
						zanNumb:955,
						isShowVoice:false,
					}
				],
				zanImgIndex:0, //默认未点赞
				zan:[require('../../../static/zan.png'),require('../../../static/glZan1.png')],
				isShowPlay:true,//播放
				playIndex:-1,//点击当前播放
			}
		},
		methods:{
			// dianzan(){
			// 	this.zanImgIndex = 1 ? '1' : '0';
			// },
			// 跳到个人游记主页
			goMyTourNote(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/myTourNote'
				})
			},
			// 跳到游记详情
			goTourNoteDetails(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/tourNoteDetails'
				})
			},
			//跳到写游记页面
			goWriteRoute(){
				uni.navigateTo({
					url:'/pages/gonglue/myselfTourNote/writeTourNote'
				})
			},
			//播放
			playVoice(index){
				// console.log(index);
				this.playIndex = index;
				this.isShowPlay = false;
			},
			//暂停
			pausedVoice(index){
				this.playIndex = index;
				// console.log(index);
				this.isShowPlay = true;
			},
		},
	}
</script>

<style>
	.scrollHeight{
		height: 100%;
	}
	.mynoteWrap{
		border-bottom: 15upx solid #F6F6F6;
		padding-bottom: 22upx;
		margin-bottom:22upx;
	}
	.mynoteWrap:first-of-type{margin-top: 44upx;}
	.myNoteImg {
		margin:0 26upx;
		width:690upx;
		height: 318upx;
		position: relative;
	}
	.myNoteImgText{
		position: absolute;
		z-index: 9;
		top:20upx;
		left: 15upx;
		color: #FFFFFF;
	}
	.mtNoteTitle{
		font-size: 30upx;
		line-height: 48upx;
		width:500upx;
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	.mtNoteTitle:first-letter{
		font-size: 40upx;
	}
	.mtNoteTime,.mtNoteArea{
		font-size: 24upx;
		line-height:30upx;
	}
	.mtNoteTime text{
		margin-right: 10upx;
	}
	.myNoteImg image{
		width:690upx;
		height: 318upx;
		background-color: #DDDDDD;
		border-radius: 10upx;
	}
	.myNoteUser{
		height: 70upx;
		margin:15upx 26upx 0 26upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.myNoteUser>view{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}
	.mynoteTouxiang image{
		width:58upx;
		height:58upx;
		border-radius:58upx;
		background-color: #ddd;
	}
	.mynoteInfo{
		margin-left: 20upx;
	}
	.mynoteInfo text{
		color: #666666;
		display: block;
	}
	.mynoteInfo text:first-child{
		font-size: 28upx;
	}
	.mynoteInfo text:nth-child(2){
		font-size: 22upx;
		max-width:300upx;
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	.nynoteZan{
		font-size:24upx;
		color: #999999;
	}
	.nynoteZan image{
		width:32upx;
		height: 26upx;
		margin-right: 10upx;
	}
	.writeRouteBtn{
		position: fixed;
		width:281upx;
		height:118upx;
		z-index: 10;
		left: 50%;
		margin-left: -140upx;
		bottom:6upx;
	}	
	.writeRouteBtn image{
		width:281upx;
		height:118upx;
	}
	.voiceCon{
		margin-left:42upx;
		height: 80upx;
	}
	.voiceBtn > view{
		height: 80upx;
		display:flex;
		flex-direction:row;
		align-items: center;
	}
	.voiceCon image{
		width:50upx;
		height: 50upx;
	}
</style>
